<template>
  <div class="container">
    <!--    忘记密码-->
    <MyNav>找回密码</MyNav>
    <van-form @submit="onSubmit">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <van-field
          v-model="phoneNumber"
          name="phoneNumber"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ pattern,required: true, message: '请正确填写手机号' }]"
      />
      <van-field
          v-model="sms"
          name="sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入验证码"
          :rules="[{ validator1,required: true, message: '请正确输入验证码' }]"
      >
        <template #button>
          <van-button size="small" v-if="$store.state.show" type="primary" @click.prevent="identifyingCode" color="#67ABD6" plain>发送验证码</van-button>
          <van-button size="small" v-if="!$store.state.show" type="primary" disabled color="#67ABD6" plain>{{$store.state.count}} 秒后重试</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit" color="#67ABD6" plain>提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {pwdList, Sms} from "@/api/http";
import { Toast } from 'vant';
import MyNav from "@/components/MyNav";
export default {
  name: "ForgetView",
  components:{
    MyNav,
  },
  data() {
    return {
      username: '',
      password: '',
      phoneNumber: '',
      sms: "",
      pattern: /^1[3|4|5|7|8][0-9]{9}$/,
    }
  },
  methods: {
    //  获取验证码按钮 倒计时
    identifyingCode(){
      // 发送请求
      if(this.phoneNumber) {
        Sms(this.phoneNumber).then(res=>{
          console.log(res);
          if(res.code == 0){
            Toast.success('发送成功，请注意查收');
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.$store.commit('getCount',TIME_COUNT);
              // this.show = false;
              this.$store.commit('changeShow',false);
              this.timer = setInterval(() => {
                if (this.$store.state.count > 0 && this.$store.state.count <= TIME_COUNT) {
                  this.$store.commit('changeCount');
                  this.$store.getters.getMyCount;
                } else {
                  this.$store.commit('changeShow',true);
                  // this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000)
            }
          } else {
            Toast.fail('发送失败，请重试！');
          }
        })
      } else {
        Toast.fail('请正确输入手机号！');
      }
    },
    //提交
    onSubmit(values) {
      console.log('submit', values);
      pwdList('18331356601',values.password,values.phoneNumber,values.sms).then(res=>{
        console.log(res);
        if (res.code == 0) {
          Toast.success('密码修改成功！');
          setTimeout(()=>{
            this.$router.go(-1);
          },500)
          this.$store.commit('changeLogin',true)
          console.log(res)
          this.$store.commit('changeUserInfo',res.data)
        } else {
          Toast.success(res.msg+'，请重试！');
        }
      })
    },
    //校验验证码
    validator1(val) {
      return /^\d{6}$/.test(val);
    },
  },
}
</script>

<style scoped lang="less">

</style>